<template>
  <back-dialog-base
    @close="close"
    @onCommit="handleSubmit"
    :title="title"
    :visible="visibleDialog"
    width="15rem"
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-form-item label="值班类型：" prop="arrangetype">
              <el-input disabled v-model="form.arrangetype"></el-input>
            </el-form-item>
            <el-form-item label="当班人员：" prop="userName">
              <el-input disabled v-model="form.userName"></el-input>
            </el-form-item>
            <el-form-item label="当班班长：" prop="monitorName">
              <el-input disabled v-model="form.monitorName"></el-input>
            </el-form-item>
            <el-form-item label="开始时间：" prop="startTime">
              <el-date-picker
                style="width: 100%"
                v-model="form.startTime"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="--请选择--"
              />
            </el-form-item>
            <el-form-item label="结束时间：" prop="endTime">
              <el-date-picker
                style="width: 100%"
                v-model="form.endTime"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="--请选择--"
              />
            </el-form-item>
            <el-form-item label="值班说明：" prop="remark">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, watch } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { RecordsDutySave } from '@/api/dutyManagement'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})

const formRef = ref(null)
const emits = defineEmits(['onReload'])
const form = reactive({
  arrangetype: '', //值班类型
  id: '',
  monitorName: '', //值班班长
  // monitorId: '', //值班班长ID
  remark: '', //值班说明
  startTime: '', //开始时间
  // userId: '', //值班班长
  userName: '' //当班人员
})
const close = () => {
  formRef.value.resetFields()
}
const save = async (data) => {
  const res = await RecordsDutySave(data)
  if (res && res.id) {
    if (props.title === '值班登记') {
      message({ type: 'success', message: '值班登记成功!' })
    }
    // clearForm()
    emits('onReload')
  }
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      save(form)
    } else {
      return false
    }
  })
}
watch(
  () => props.rowData,
  () => {
    form.id = props.rowData.id
    form.arrangetype = props.rowData.arrangetype
    form.userName = props.rowData.userName
    form.monitorName = props.rowData.monitorName
  }
)
const rules = reactive({
  remark: [
    {
      required: true,
      message: '值班说明不能为空',
      trigger: 'blur'
    }
  ],
  startTime: [
    {
      required: true,
      message: '开始时间不能为空',
      trigger: 'blur'
    }
  ],
  endTime: [
    {
      required: true,
      message: '结束时间不能为空',
      trigger: 'blur'
    }
  ]
})
</script>
<style lang="scss" scoped>
.content-warp {
  width: 100%;
  height: 100%;
  display: flex;
  .left-form {
    flex: 4;
  }
}
</style>
